<template>
  <view>
    <uni-list>
	  <uni-list-item title="项目名称" right-text="进度"></uni-list-item>
      <uni-list-item 
        v-for="(item, index) in progressList" 
		class="text"
        :key="index" 
        :title="item.projectName" 
        :rightText="item.progress + '%'" 
        showExtraIcon="true" 
        :extraIcon="{ type: 'calendar-filled' }" 
      />
    </uni-list>
  </view>
</template>


<script>
  import { getProgress, listProgress } from "@/api/project/progress.js"

  export default {
    data() {
        return {
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // progress表格数据
          progressList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          openView: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            projectId: null,
            progress: null
          },
          percentage: 0,
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            projectId: [
              { required: true, message: "项目ID不能为空", trigger: "blur" }
            ],
            progress: [
              { required: true, message: "进度值不能为空", trigger: "blur" }
            ]
          },
          isViewMode: false,
          dialogVisible: false,
        };
	},
    onLoad() {
      this.getList()
    },
    methods: {
      getList() {
		  this.loading = true;
        listProgress(this.queryParams).then(response => {
          this.progressList = response.rows;
		  this.total = response.total;
		  this.loading = false;
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
  
  .uni-list-item {
  	  height: 60px;
  }
  
  .uni-list-item__title {
    font-size: 30px;
  }
  
  .uni-list-item__right-text {
    font-size: 16px;
  }

</style>
